<template>
  <div style="padding-left: 100px;padding-top: 50px">
    测试axios-{{title}}
    <p>
      <label>用户名：</label>
      <input v-model="account">
    </p>
    <p>
      <label>密码：</label>
      <input
        v-model="password"
        type="password"
      >
    </p>

    <p>
      <label>确认密码：</label>
      <input
        v-model="password2"
        type="password"
      >
    </p>

    <p>
      <label>手机号：</label>
      <input
        type="text"
        class="form-control"
        name="graph_captcha"
        placeholder="手机号"
        v-model="phone"
      >
    </p>

    <!-- 获取图片验证码 -->
    <input
      type="text"
      class="form-control"
      name="graph_captcha"
      placeholder="图形验证码"
      v-model="imgCode"
    >
    <span class="input-group-addon captcha-addon">
      <!--加了一个类captcha-addon-->
      <img
        @click="getImage"
        id="captcha-img"
        :src="image_url"
      >
      <!--加了id aptcha-img-->
    </span>

    <!-- 获取手机验证码 -->

    <br>
    <input
      type="text"
      class="form-control"
      name="graph_captcha"
      placeholder="短信验证码"
      v-model="phoneCode"
    >
    <button @click="sendcode">{{msgButtonText}}</button>
    <p>
      <button @click="requetLogin">注册</button>
    </p>

    <video  height="600" width="400" controls
      id="captcha-img" style="height: 700px;   
       position: absolute;
      margin-left: 500px;
      margin-top: -350px;"
    >
     <source :src="video_url" type="video/mp4"  width="400" height="600">
    </video>

  </div>
</template>

<script>
import {
  login_post,
  send_phone_code_post,
  image_code,
  register_post,
} from "@/components/axios_api/api.js"; // @符号指的是src路径
import { base_url } from "@/components/axios_api/http.js"; // @符号指的是src路径
import { v4 } from "uuid";
export default {
  // vue页面中双向绑定数据
  data() {
    return {
      title: "测试axios",
      is_send: false,
      account: "",
      password: "",
      password2: "",
      phone: "",
      uuid: v4(),
      imgCode: "",
      phoneCode: "",
      image_url: base_url + "user/code?uuid=" + this.uuid,
      msgButtonText: "获取手机验证码",
      username_message: "",
      username_error: false,
      video_url: 'http://127.0.0.1:8000/course/video/v2.mp4'
    };
  },
  // vue生命周期中挂在的函数
  mounted() {
    this.getImage()
  },
  methods: {
    videos() {
      console.log('2222222222222')
      this.video_url = 'http://127.0.0.1:8000/course/video/V1.mp4'
    },
    getImage() {
      this.uuid = v4();
      this.image_url = base_url + "user/code?uuid=" + this.uuid;
    },
    requetLogin() {
      // 获取小节的内容
      let data = {
        account: this.account,
        password: this.password,
        code: this.imgCode,
        phone: this.phone,
        uuid: this.uuid
      };
      register_post(data)
        .then((resp) => {
          // resp: 后端返回的数据
          if (resp.code != 200) {
            // 当注册失败，刷新验证码
            this.getImage()
          }
          console.log("login result:", resp);
        })
        .catch((err) => {
          console.log(err);
        });
        
    },

    // 获取手机验证码
    sendcode() {
      // 0. 判断是否发送中
      if (this.is_send) {
        return;
      }
      // 清空之前的错误信息
      this.clear_error();
      //1.检查手机号和验证码是否合法
      this.check_account();
      this.checke_password();
      this.check_phone();
      if (this.phone_error || this.username_error) {
        if (this.username_error) {
          alert(this.username_message);
        } else if (this.password_error) {
          alert(this.password_message);
        } else if (this.phone_error) {
          alert(this.phone_message);
        }
        return;
      }

      if (this.imgCode == "") {
        alert("图形验证码不能为空！");
        return;
      }

      // 2.短信发送
      // imgCode: '',
      // uuid: '',
      var data = {
        phone: this.phone,
        image_code_uuid: this.uuid,
        image_code: this.imgCode,
      };
      this.is_send = true;
      send_phone_code_post(data)
        .then((res) => {
          console.log(res);
          // 发送短信失败
          if (res.code != 200) {
            this.errorMsg = res.message;
            return;
          }

          // 发送短信成功
          let t = 60;
          let si = setInterval(() => {
            this.msgButtonText = t;
            t = t - 1;
            if (t == 0) {
              this.is_send = false;
              this.msgButtonText = "获取手机验证码";
              clearInterval(si);
            }
          }, 1000);

          if (res.code == 200) {
            console.log("短信发送成功");
            alert(res.message);
          } else {
            alert(res.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
      
    },

    check_account() {
      // return true  // 注释检查用户名功能

      // console.log('判断用户名')
      // console.log(this.username == '')
      var reg = new RegExp(/^[a-zA-Z0-9_-]{3,16}$/); //字符串正则表达式 4到14位（字母，数字，下划线，减号）
      // 1.判断用户名是否为空
      if (this.account == "") {
        this.username_message = "用户名不能为空";
        this.username_error = true;
        return false;
      }
      // 2.判断用户名 4到14位（字母，数字，下划线，减号）
      if (!reg.test(this.account)) {
        this.username_message = "用户名格式不正确";
        this.username_error = true;
        return false;
      }
      // else {
      //   // 去后端检查用户名使用数量
      //   user_count({ type: 'username', data: this.username }).then((res) => {
      //     console.log(res)
      //     if (res.data.count > 0) {
      //       this.username_message = '用户名已存在'
      //       this.username_error = true
      //     } else {
      //       this.username_message = ''
      //       this.username_error = false
      //     }
      //   })
      // }
      return true;
    },

    check_phone() {
      console.log("检查手机号");
      var reg = new RegExp(/^[1]([3-9])[0-9]{9}$/);
      if (this.phone == "") {
        this.phone_message = "手机号不能为空";
        this.phone_error = true;
      }

      if (!reg.test(this.phone)) {
        this.phone_message = "手机号格式不正确";
        this.phone_error = true;
        return false;
      }
      return true;
      // else {
      //   // 去后端查用户数量
      //   user_count({ type: 'phone', data: this.phone }).then((res) => {
      //     console.log(res)
      //     if (res.data.count > 0) {
      //       this.phone_message = '手机号已存在'
      //       this.phone_error = true
      //     } else {
      //       this.phone_message = ''
      //       this.phone_error = false
      //     }
      //   })
      // }
    },
    clear_error() {
      this.phone_message = "";
      this.phone_error = false;
      this.username_message = "";
      this.username_error = false;
      this.password_message = "";
      this.password_error = false;
    },

    // 检查密码
    checke_password() {
      var reg = new RegExp(/^[a-zA-Z0-9_-]{6,32}$/);
      if (!reg.test(this.password)) {
        this.password_message = "密码格式不正确";
        this.password_error = true;
        return false;
      }

      if (this.password != this.password2) {
        this.password_message = "2次密码不一致";
        this.password_error = true;
        return false;
      }

      return true;
    },
  },
};
</script>

<style scoped>
.captcha-addon {
  padding: 0;
  overflow: hidden;
}

#captcha-img {
  height: 32px;
  cursor: pointer;
}
</style>